// 1.渲染图书列表
// 1.封装函数
const creator = '老张'
function getBooksList() {
  // 1.1 获取数据
  axios({
    url: "http://hmajax.itheima.net/api/books",
    params: {
      creator
    }
  }).then(result => {
    // console.log(result);
    const bookList = result.data.data
    // console.log(bookList);
    // 1.2 渲染数据
    const htmlStr = bookList.map((item, index) => {
      return `
      <tr>
          <td>${index + 1}</td>
          <td>${item.bookname}</td>
          <td>${item.author}</td>
          <td>${item.publisher}</td>
          <td data-id = "${item.id}">
            <span class="del">预约</span>
            <span class="edit">取消</span>
          </td>
        </tr>
      `
    }).join("")
    // console.log(htmlStr);
    document.querySelector(".list").innerHTML = htmlStr
  })
}
// 网页加载运行，获取并渲染列表一次
getBooksList()

// 2.新增图书
// 2.1创建弹框对象
const addModalDom = document.querySelector(".add-modal")
const addModal = new bootstrap.Modal(addModalDom)
// 2.2收集表单数据,并提交到服务器保存
document.querySelector(".add-btn").addEventListener("click", () => {
  const addForm = document.querySelector(".add-form")
  const bookObj = serialize(addForm, { hash: true, empty: true })
  // console.log(bookObj);
  axios({
    url: 'http://hmajax.itheima.net/api/books',
    method: "post",
    data: {
      ...bookObj, //这里用展开运算符真的没想到
      creator
    }
  }).then(result => {
    // console.log(result);
    // 重置表单
    addForm.reset()
    // 隐藏弹框
    addModal.hide()
    // 添加成功后，重新请求并渲染页面
    getBooksList()
  })

})

// 3.删除图书
// 3.1 绑定删除元素-事件委托
document.querySelector(".list").addEventListener("click", e => {
  if (e.target.classList.contains("del")) {
    // console.log("点击删除按钮");
    // 获取图书id
    const bookId = e.target.parentNode.dataset.id
    // console.log(bookId);

    // 3.2 调用删除接口
    axios({
      url: `http://hmajax.itheima.net/api/books/${bookId}`,
      method: "delete"
    }).then(() => {
      // 3.3 刷新图书列表
      getBooksList()
    })
  }
})

// 4.编辑图书
// 4.1 获取编辑弹框
const editDom = document.querySelector(".edit-modal")
const editModal = new bootstrap.Modal(editDom)
// 4.2编辑元素 点击弹窗显示
document.querySelector(".list").addEventListener("click", e => {
  if (e.target.classList.contains("edit")) {
    // 获取当前数据 回显到表单当中
    const bookId = e.target.parentNode.dataset.id
    axios({
      url: `http://hmajax.itheima.net/api/books/${bookId}`,
    }).then(result => {
      const bookList = result.data.data
      // 发现数据对象“属性”和标签“类名”一致
      // 遍历数据对象，使用属性去获取对应标签 快速赋值
      for (var k in bookList) {
        document.querySelector(`.edit-form .${k}`).value = bookList[k]
      }

    })
    editModal.show()
  }
})
// 4.3修改按钮 点击隐藏
document.querySelector(".edit-btn").addEventListener("click", e => {
  // 4.4提交保存修改，并刷新列表
  const editForm = document.querySelector(".edit-form")
  const { id, bookname, author, publisher } = serialize(editForm, { hash: true, empty: true })
  axios({
    url: `http://hmajax.itheima.net/api/books/${id}`,
    method: "put",
    data: {
      id,
      bookname,
      author,
      publisher
    }
  }).then(result => {
    // 修改成功后 重新获取刷新列表
    getBooksList()
    // 隐藏弹框
    editModal.hide()
  })


})
